<template>
  <div class="payCar">
    <Input />
    <van-row gutter="20" class="row_col">
      <van-col span="5" v-for="item in showList" :key="item">
        <van-image
          width="70px"
          height="70px"
          fit="scale-down"
          :src="item.icon_url"
          class="imgList"
          @click="goDetail"
        />
        <p class="series_name">{{ item.name }}</p>
      </van-col>
    </van-row>
    <van-tabs v-model:active="active" class="tabs">
      <van-tab :title="items.tab_name" v-for="items in listTab" :key="items">
        <CarItems :recommend="recommend[active]" />
      </van-tab>
      <div class="van-ellipsis noMore" v-if="recommend.length > 0 && showList">没有更多了~</div>
    </van-tabs>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue";
import Input from "../components/input.vue";
import { get } from "@/tool/get";
import { onBeforeMount, reactive, toRefs } from "vue";
import CarItems from "@/components/carItems.vue";
import { Toast } from "vant";
export default {
  name:"payCar",
  setup() {
    get("/data/luxuryCar").then((res) => {
      res = res.data.list
      state.recommend.push(res);
    });
    get("/data/twoRecommend").then((res) => {
      let list = [];
      res = res.data.data;
      res.forEach((_res) => {
        list.push(_res.info);
      });
      state.recommend.push(list);
    });
    get("/data/fourS").then((res) => {
      res = res.data.data;
      state.recommend.push(res.list);
    });
    onBeforeMount(async () => {
      // todo 这里这个接口对应的是上边三个接口的内容
      await get("/data/twoHander").then((res) => {
        res = res.data.data;
        console.log(res, '---');
        state.showList = res.top_show_conf.show_list;
        state.listTab = res.sku_list_tabs;
      });
    });
    const goDetail = () => {
      Toast.fail("组件暂未开发");
    };
    const state = reactive({
      showList: null,
      listTab: null,
      active: 0,
      recommend: [],
    });
    return {
      ...toRefs(state),
      goDetail,
    };
  },
  components: {
    Tabbar,
    Input,
    CarItems,
  },
};
</script>

<style lang="less" scoped>
.payCar {
  overflow-x: hidden;
  // background-image: linear-gradient(#ddd, #fff);
  // background: #ddd;
  padding-bottom: 50px;
  .row_col {
    padding-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 10px;
    position: relative;
  }
  .tabs {
    // background-image: linear-gradient(#ddd, #fff,#ddd);
    // background: #eee;
  }
  .noMore{
    text-align: center;
    margin:10px auto;
  }
  .series_name {
    font-size: 12px;
    margin: 0;
    text-align: center;
    position: relative;
    top: -10px;
    left: 5px;
  }
}
</style>